@import "../../style/css/style.less";
html,body{
  max-width: 420px;
  margin:auto;
}
header{
  width: 100%;
  height: 3em;
  .blg(top,rgba(0,0,0,.8),rgba(0,0,0,0));
  .pf;
  top: 0px;
  left: 0px;
  z-index: 100;
  .img{
    width:6em;
    height: 1.9em;
    .db;
    margin:.7em 1.5em 0;
    .bud(@Mob_logo_green,center center,100% 100%);
  }
}
header:before,header:after{
  content: '';
  clear: both;
  display: table;
}
.banner{
  width: 100%;
  height: 18em;
  background-color: #e3e3e3;
  margin-bottom: 25px;
  .pr;
  i{
    .pa;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
  }
  .text{
    width: 70%;
    //height: 9em;
    .bud('/style/images/banner_text_bg.svg',center center,100% 100%);
    .pa;
    .cm;
    .tac;
    //background: rgba(0,0,51,.3);
    color: @cf;
    .br(3px);
    p{
      font-size:1.5em;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

    }
    p:first-child{
       margin-top: 23px;
       letter-spacing: 2px;
       line-height: 2.4em;
    }
  }
  .icon{
    width: 100%;
    height: 1.75em;
    .pa;
    left: 0;
    bottom: 0;
    b{
      width: 100%;
      height: 98%;
      .pa;
      left: 0;
      bottom: 0;
      top: inherit;
    }
    b{
      height: 100%;
      .bud(@image_top,center center,100% 100%);
    }
  }
}
.banner:before,.banner:after{
  content: '';
  clear: both;
  display: table;
}
nav{
  width: 100%;
  height: 8em;
  ul{
    .df;
    li{
      width: 50%;
      height: 3em;
      line-height:3em;
      background: @cf;
      .tac;
      color:@c9;
      font-size: 18px;
      .pr;
      i{
        width: 25px;
        height: 25px;
        display: inline-block;
        vertical-align: sub;
      }
      s{
        width: 1px;
        height: 1.5em;
        background: #ccc;
        .pa;
        right: 0;
        top: 0;
        bottom: 0;
        margin:auto;
      }
    }
    
    
  }
  div{
    width: 100%;
    height: 3em;
    line-height: 3em;
    box-shadow: 0 0 10px 0 #eee inset;
    overflow-x: auto;
    margin: 15px 0;
    .tac;
    white-space: nowrap;
    a{
      display: inline-block;
      padding:0 10px;
      color:@c6;
    }
    // i,b{
    //   width: 100%;
    //   height: 10px;
    //   .bud(@ICON-05, center center,cover);
    //   display: inline-block;
    // }
    // b{
    //   .tm(rotate(180deg));
    // }
    .color{
      color:#BB194B;
    }
  }
 
}
main{
  >div{
    .tac;
    .pr;
    section{
      font-size: 20px;
      color:@c3;
      margin-bottom:  25px;
      .tac;
      i{
        // width: 130px;
        height: 12px;
        display: block;
        overflow: hidden;
        .bud(@Mob_OB,center center,100% 100%);
        margin:10px auto;
      }
    }
    >div{
      width: 100%;
      height: 18em;
      margin-bottom: 1em;
      .pr;
      .dn;
      z-index: 10;
      .text{
        width:43%;
        height: 18em;//此处高度跟随字体大小
        .pa;
        top: 0px;
        left: 0px;
        bottom: 0px;
        margin: auto;
        background: rgba(255,255,255,.95);
        padding:1em;
        font-size: 12px;
        text-align: left;
        b{
          width: 5px;
          height: 2em;
          background: @cs;
          .pa;
          top: 0px;
          right: 0px;
        }
        h1{
          margin-top: 12px;
          font-size: 16px;
          color:@c3;
        }
        h2{
          font-size: 14px;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow:ellipsis;
          margin-bottom: .2em;
        }
        p{
          .pr;
          s{
            width: 30px;
            height: 21px;
            background: #fff;
            .pa;
            right: 0px;
            bottom: 0px;
          }
        }
        div{
          height: 2em;
          line-height: 1em;
          padding:.5em 1em;
          .tac;
          .blg(left,#B71955,#CA192A);
          .pa;
          right: 1em;
          bottom: 1em;
          .br(2em);
          color: @cf;
        }
      }
    }
    button{
      width: 160px;
      height: 30px;
      line-height: 30px;
      .tac;
      background: none;
      border: 0;
      margin-bottom: 1em;
      color:@c6;
      font-size: 16px;
      .pr;
      z-index: 100;
      i{
        width: 10px;
        height: 5px;
        display: inline-block;
        .bud(@Mob_loading,center center,100% 100%);
        .pa;
        top: 0px;
        right: 0px;
        bottom: 0px;
        margin:auto;
      }
    }
  }
  #ob{
    padding-top: 2.5em;
  }
  #ob:before{
    content: '';
    width:40%;
    height: 300px;
    .pa;
    left: 0;
    top: 0;
    .bud('/style/images/main1_bg1.png',center center,100% 100%);
  }
  #ob:after{
    content: '';
    width:40%;
    height: 300px;
    .pa;
    right: 0;
    bottom: 0;
    .bud('/style/images/main1_bg2.png',center center,100% 100%);
  }
  #ns{
    padding:2em 0 0;
    background: #f1f1f1;
    section{
      i{
        .bud(@Mob_NS,center center,100% 100%);
      }
    }
  }
  #ns:before{
    content: '';
    width:40%;
    height: 300px;
    .pa;
    right: 0;
    top: 0;
    .bud('/style/images/main2_bg.png',center center,100% 100%);
  }
  #ns:after{
    content: '';
    width:40%;
    height: 300px;
    .pa;
    left: 0;
    bottom: 0;
    .bud('/style/images/main2_bg.png',center center,100% 100%);
    .tm(rotate(180deg));
  }
}
footer{
  width: 100%;
  height: 12.8em;
  .bud('/style/images/footer-bg1.png',center center,100% 100%);
  margin-bottom: 3em;
  .pr;
  color: @cf;
  >div{
    .df;
    padding:1em;
    height: 10.5em;
    >ul{
      width: 100%;
      li{
        line-height: 25px;
        font-size: 12px;
      }
    }
    >img{
      width:20%;
      .pr;
      top: -12px;
    }
  }
  >p{
    .tac;
    width: 100%;
    height:4.5em;
    background-color: rgba(0,0,0,.5);
    font-size: 12px;
    .pa;
    left: 0;
    bottom: 0;
    color: @c9;
    padding-top: .5em;
  }
}
.layer-aside{
  .pf;
  right: 1em;
  bottom: 12em;
  z-index: 100;
  i{
    .db;
    width: 3em;
    height: 3em;
    .br(50%);
    .bud(@aside1,center center,100% 100%);
  }
   .aside0{
    .bud(@luozhai_call,center center,100% 100%);
  }
  .aside2{
    .bud(@aside2,center center,100% 100%);
  }
  .layer-mask {
    .pf;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0,0,0,.5);
    z-index: 10;
    >div{
      width: 80%;
      height: 25em;
      background: @cf;
      .pa;
      .cm;
      b{
        width: 1em;
        height: 1em;
        .pa;
        right: .5em;
        top: .5em;
        .bud(@close,center center,100% 100%);
        z-index: 1;
      }
      div.title{
        width: 100%;
        height: 11em;
        .blg(left,#B71955,#CA192A);
        color: @cf;
        padding:1em 2em 0;
        .tac;
        font-weight: 300;
        font-size: 1em;
        .pr;
        .img{
          width: 100%;
          height: 5em;
          .bud(@bdbj,center center,100% 100%);
          .pa;
          bottom: 0;
          left: 0;
        }
      }
      div.data{
        margin-top: 1em;
        input{
          width: 80%;
          height: 2.5em;
          line-height: 2.5em;
          margin-top: 1em;
          background-color: #F3F3F3;
          .br(3px);
          padding:0 1em;
          border:none;
          margin-left: 10%;
        }
        input[type='button']{
          .blg(left,#B71955,#CA192A);
          color: @cf;
          margin-top: 1.8em;
        }
      }
    }
  }
}
.layer-button{
  .pf;
  width: 100%;
  max-width: 420px;
  height:3em;
  .df;
  left: 0;
  bottom: 0;
  right: 0;
  margin:0 auto;
  z-index: 101;
  .bud('/style/images/B-01.png',center cener,100% 100%);
  >a{
    width: 50%;
    height: 2em;
    line-height: 2em;
    margin-top: .5em;
    .tac;
    color:@cf;
    .db;
    i{
      width: 1em;
      height: 1em;
      display: inline-block;
      .pr;
      top: 2px;
    }
  }
  .button1{
    border-right: 1px solid @cf;

    i{
      .bud(@button1,center center,100% 100%);
    }
  }
  .button2{
    i{
      .bud(@button2,center center,100% 100%);
    }
  }
}
pre{
  font-family: 'Microsoft Yahei', 'arial', 'simsun', 'tahoma';
}